<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript"
	src="../plugin/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="../plugin/bootstrap/css/bootstrap.min.css" />
<link href="../plugin/admin/css/materialdesignicons.min.css"
	rel="stylesheet">
<link href="../plugin/admin/css/style.min.css" rel="stylesheet">
<title>导航管理</title>
<meta name="管理" content="后台管理">
</head>
<style>
.table tbody tr td {
	vertical-align: middle;
}
</style>

<body>
	<div class="container" style="margin-top: 40px;">
		<div class="row">
			<div class="col-md-4">
				<button class="btn btn-primary btn-primary" data-toggle="modal"
					data-target="#addModal">
					<span class="glyphicon glyphicon-plus">增加</span>
				</button>
				<button type="button" class="btn btn-success" data-toggle="modal"
					data-target="#helpModel">
					<span class="glyphicon glyphicon-question-sign">帮助</span>
				</button>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-10">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>id</th>
							<th>标题</th>
							<th>图标</th>
							<th>地址</th>
							<th>备注</th>
							<th>状态</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<tr th:each="SysNav:${#request.getAttribute('Navlist')}">
							<!-- <form th:action="@{/nav/updateState(id=${SysNav.id},state=${SysNav.state})}" method="post" id="NavForm"> -->
							<td id="SysNavId" th:text="${SysNav.id}"></td>
							<td id="SysNavTitle" th:text="${SysNav.title}"></td>
							<td id="SysNavIcon" th:text="${SysNav.icon}"></td>
							<td th:text="www.baidu.com"></td>
							<td th:text="无"></td>
							<td th:switch="${SysNav.state}"><p th:case="0">
									<label class='lyear-switch switch-solid switch-pink'><input
										id='SysNavState' type='checkbox' th:value='${SysNav.state}'
										th:onclick='chageState([[${SysNav.id}]],[[${SysNav.state}]],checked)'
										name='state'> </lable> <span></span>
								</p>
								<p th:case="1">
									<label class='lyear-switch switch-solid switch-pink'><input
										id='SysNavState' type='checkbox' th:value='${SysNav.state}'
										checked=""
										th:onclick='chageState([[${SysNav.id}]],[[${SysNav.state}]],checked)'
										name='state'> </lable> <span></span>
								</p></td>
							<td>
								<button type='button' class='btn btn-warning'
									data-toggle='modal' data-target='#editModal'>
									<span class='glyphicon glyphicon-edit'>修改</span>
								</button>
								<button type='button' class='btn btn-danger'>
									<span class='glyphicon glyphicon-trash' th:onclick='detNav([[${SysNav.id}]])' >删除</span>
								</button> <!-- th:text="<button type='button' class='btn btn-warning'
									data-toggle='modal' data-target='#editModal'>
									<span class='glyphicon glyphicon-edit'>修改</span>
								</button>
								<button type='button' class='btn btn-danger'>
									<span class='glyphicon glyphicon-trash'>删除</span>
								</button>"	 -->
							</td>
							<!-- <input type="hidden" name="id" th:value="${SysNav.id}" />
							<input type="hidden" name="state" th:value="${SysNav.state}" /> -->
							<!-- </form> -->
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">添加导航</h4>
				</div>
				<div class="modal-body text-center">
					<label>标题&emsp;<input type="text" id="title" name="title" /></label><br>
					<label>icon&emsp;<input type="text" id="icon" name="icon" /></label><br>
					<label>地址&emsp;<input type="text" /></label><br> <label>状态&emsp;<input
						type="text" id="state" name="state" placeholder="请输入1或者0" /></label><br>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" data-dismiss="modal">
						关闭</button>
					<button type="button" class="btn btn-success" data-dismiss="modal"
						id="addNav">确定</button>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="editModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">修改导航</h4>
				</div>
				<div class="modal-body text-center">
					<label>标题&emsp;<input type="text" id="title" name="title" /></label><br>
					<label>icon&emsp;<input type="text" id="icon" name="icon" /></label><br>
					<label>地址&emsp;<input type="text" /></label><br> <label>备注&emsp;<input
						type="text" /></label><br>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" data-dismiss="modal">
						关闭</button>
					<button type="button" class="btn btn-success">确定</button>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="helpModel" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">修改导航</h4>
				</div>
				<div class="modal-body text-center">
					<div class="container-fluid text-left">
						<div class="row">
							<div class="col-md-6">
								<span class="glyphicon glyphicon-asterisk">glyphicon
									glyphicon-asterisk</span> <span class="glyphicon glyphicon-headphones">glyphicon
									glyphicon-headphones</span> <span class="glyphicon glyphicon-flag">glyphicon
									glyphicon-flag</span> <span class="glyphicon glyphicon-download-alt">glyphicon
									glyphicon-download-alt</span> <span
									class="glyphicon glyphicon-map-marker">glyphicon
									glyphicon-map-marker</span> <span
									class="glyphicon glyphicon-info-sign">glyphicon
									glyphicon-info-sign</span> <span class="glyphicon glyphicon-eye-open">glyphicon
									glyphicon-eye-open</span> <span class="glyphicon glyphicon-eye-close">glyphicon
									glyphicon-eye-close</span> <span class="glyphicon glyphicon-fire">glyphicon
									glyphicon-fire</span> <span class="glyphicon glyphicon-leaf">glyphicon
									glyphicon-leaf </span>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" data-dismiss="modal">
						关闭</button>
					<button type="button" class="btn btn-success">确定</button>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="../plugin/admin/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="../plugin/admin/js/lightyear.js"></script>
<script type="text/javascript" src="../plugin/admin/js/main.min.js"></script>
<script type="text/javascript" th:inline="javascript">
	$(function() {
		$("#addNav").click(function() {
			$.ajax({
				url : '../nav/addNav',
				type : 'POST',
				data : {
					title : $("#title").val(),
					icon : $("#icon").val(),
					state : $("#state").val()
				},
				success : function() {
					//alert("666");
					window.location.reload();
				}
			});
		});
	})

	function chageState(id, state, checked) {
		$.ajax({
			url : '../nav/updateState',
			dataType : "json",
			type : 'POST',
			cache : false,
			data : {
				id : id,
				state : state
			},
			success : function(data) {
				console.log(data.result);
				if (data.result == 1) {
					lightyear.loading('show');
					// 假设ajax提交操作
					setTimeout(function() {
						lightyear.loading('hide');
						lightyear.notify('修改成功!', 'success', 1000);
					}, 1e3)
					//window.location.reload();
				}
			}
		});
	};
	function detNav(id){
		$.ajax({
			url : '../nav/detNav',
			dataType : "json",
			type : 'POST',
			cache : false,
			data : {
				id : id
			},
			success : function(data) {
				console.log(data.result);
				if (data.result == 1) {
					lightyear.loading('show');
					// 假设ajax提交操作
					setTimeout(function() {
						lightyear.loading('hide');
						lightyear.notify('删除成功!', 'success', 1000);
					}, 1e3)
					setTimeout(function() {
					window.location.reload();
					}, 2000)
				}
			}
		});
	}
</script>

</html>